<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link href="../../../css/mui.css" rel="stylesheet"/>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/iconfont.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../../css/repayment_mainPlain.css">

    <style>
        .mui-card .mui-control-content {
            padding: 10px;
        }
        .mui-control-content {
            height: 150px;
        }
		.status{
			float: right;
			font-size: 20px;
		}
		.mui-pull-bottom-tips {
			text-align: center;
			background-color: #efeff4;
			font-size: 15px;
			line-height: 40px;
			color: #777;
		}
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left touch-action"></a>
        <h1 class="mui-title">计划主任务</h1>

    </header>

    <div class="mui-content" id="mui-content">
        <ul class="mui-table-view" id="mainPlan-view">
            <li class="mui-table-view-cell" class="main_plan_li" v-for = 'item in planmainList' @tap="open_detail(item)">
                <div class="done-time">执行日期&nbsp;&nbsp;<span>{{item.p_time_explain}}</span></div>
                <div class="plan-money">计划金额&nbsp;&nbsp;&nbsp;&nbsp;<span>{{item.p_amount_explain}}</span></div>
                <div class="actual-money">实际金额&nbsp;&nbsp;&nbsp;&nbsp;<span>{{item.a_amount_explain}}</span></div>
				<p class="status mui-icon iconfont icon-zhixingzhong" style="color:#FFD14B" v-if = 'item.status == 0'>执行中</p>
				<p class="status mui-icon iconfont icon-zhixingzhong" style="color:#FFD14B" v-else-if = 'item.status == 1'>执行中</p>
				<p class="status mui-icon iconfont icon-zhixingchenggong" style="color: #71E9A4" v-else-if = 'item.status == 2'>执行成功</p>
				<p class="status mui-icon iconfont icon-zhixingchenggong" style="color: #71E9A4" v-else-if = 'item.status == 3'>部分成功</p>
				<p class="status mui-icon iconfont icon-shibai" style="color:#F16541" v-else-if = 'item.status == 4'>提交失败</p>
				<p class="status mui-icon iconfont icon-shibai" style="color:#F16541" v-else-if = 'item.status == 9'>执行失败</p>
				<p class="status mui-icon iconfont icon-zhixingzhong" style="color:#FFD14B" v-else>执行中</p>
				
            </li>
        </ul>
    </div>


    <script src="../../../js/mui.js"></script>
    <script src="../../../js/md5.min.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/vue.min.js"></script>
	<script src="../../../js/mui.pullToRefresh.js"></script>
	<script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/me/intelli_payment/repayment_mainPlan.js"></script>
	<script>
		var repayment_planDetail = null;
		mui.init();

		mui.plusReady(function(){
			
			
			repayment_planDetail = mui.preload({
				url: 'repayment_planDetail.html',
				id: 'repayment_planDetail',
				styles: {
					"render": "always",
					"popGesture": "hide",
					"bounce": "vertical",
					"bounceBackground": "#efeff4"
				}
			});
			
			let planid;
			window.addEventListener('get_mainPlan', function(event) {
				planid = event.detail.planid;
				mui('#mui-content').pullToRefresh({
					up: {
						callback: function(){
							var self = this;
							setTimeout(function() {
								vmdata.call(self,da(planid));
								self.endPullUpToRefresh();
							}, 1000);
						},
						auto:true
					}
				});
				
			});
			
		});
		function open_detail(item) {
			//触发子窗口传递下列数据变更计划主任务详情
			mui.fire(repayment_planDetail, 'get_planDetail', {
				detailid: item.id,
				
			});
			setTimeout(function() {
				repayment_planDetail.show("slide-in-right", 300);
			}, 150);
		}
		function da(planid){
			if(planid != ''){
				// console.log(planid);
				var da ={};
				var token=localStorage.logintoken;
				//vue.js的数据
				da["token"]=token;
				da['id']=planid;
				// console.log(vm.page);
				da['page']=vm.page++;
				var signkey=localStorage.signkey;
				var signcode=sign(da,signkey);
				
				da['sign']=signcode;
				return da;
			}
		}
		// 监听计划列表的点击事件
		function vmdata(postdata){
				//智能还款统计金额
			if(postdata.isloading == true){
				return;
			}
			postdata.isloading = true;
			//请求历史列表信息流
			var mainplansUrl=address("/api/Repayment/orders");
			let self = this;
			mui.post(mainplansUrl,postdata,function(data){
				// console.log("执行成功"+JSON.stringify(data));
				
				let curdata = data.data.data;
				postdata.isloading = false;
				
				if( data.data.max_page == data.data.page){
					self.endPullUpToRefresh(true);
				}
		
				if (data.code == 1 && (typeof(token) != undefined)) {
					plus.nativeUI.toast(data.msg);
					vm.planmainList = vm.planmainList.concat(curdata);
				}else{
					plus.nativeUI.toast(data.msg);
				}
			});
		};
		var vm = new Vue({
			el: '#mainPlan-view',
			data: {
				planmainList:[],
				page:1
			}
		});
	</script>
</body>

</html>
